<template>
	<section class="pylst_intro">
		<div class="lstit_tags">
			标签：
			<em class="f-bd f-bd-full lstit_tag" v-for="item in songsheettopList.tags">{{item}}</em>
		</div>
		<div class="u-intro">
			<div class="f-brk" @click="brk()" :class="{fthide3:isbrk}">
				<span><i>简介:</i></span>
				<span v-for="list in arr">
					<i>{{list}}</i>
					<br>
				</span>
			</div>
			<span class="intro_arrow u-arowdown"></span>
		</div>		
	</section>
</template>

<script>
	export default {
		props:{
			songsheettopList:'',
			arr:Array
		},
		data () {
			return {
				isbrk:true
			}
		},
		methods : {
			brk () {
				this.isbrk=!this.isbrk
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	
	.pylst_intro {
		position: relative;
		margin: 0 r(20px) 0 r(30px);
		padding-top: r(20px);
		line-height: r(38px);
		color: #666;
		em {
			font-size: 400;
			font-style: normal;
		}
		.lstit_tags {
			margin-bottom: r(20px);
			line-height: r(40px);
			margin-right: r(-20px);
			font-size: r(28px);
			.lstit_tag {
				display: inline-block;
				margin-right: r(20px);
				padding: r(2px) r(16px);
				font-size: r(24px);
				border: r(2px) solid rgba(0,0,0,.1);
				border-radius: 9999px;
			}
		}
		.u-intro {
		    position: relative;
		    padding-bottom: r(36px);
		    line-height: r(38px);
		    color: #666;
		    font-size: r(28px);
		    .fthide3{
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 3;
			    -webkit-box-orient: vertical;
			}
			.f-brk {
			    word-wrap: break-word;
			    word-break: break-all;
			    white-space: normal;
			    i{
			    	font-style: normal;
			    }
			}
			.intro_arrow {
			    position: absolute;
			    bottom: r(6px);
			    right: 0;
			    z-index: 3;
			    width: r(30px);
			    height: r(30px);
			}
			.u-arowdown {
			    background-position: 50%;
			    background-repeat: no-repeat;
			    background-size: r(24px) auto;
				background-image: url();
			}
		}
	}
</style>